<template>
  <div class="task_box_blue">
    <div class="task_box_blue_hd">
      <span v-on:click="tabFlag = 1" v-bind:class="{ current: tabFlag == 1 }"
        >每日任务</span
      >
      <span v-on:click="tabFlag = 2" v-bind:class="{ current: tabFlag == 2 }"
        >进阶任务</span
      >
    </div>
    <div class="task_box_blue_main" v-show="tabFlag == 1">
      <div class="task_box_blue_main_hd">
        <div class="rush-bg">
          <span
            >任务进度<i>{{ self_v }}/{{ self_c }}</i></span
          >
          <div class="rush-progress">
            <em v-bind:style="{'width':''+(self_v/self_c)*130+'px'}"></em>
          </div>
        </div>
        <a
          href="javascript:;"
          class="rush_btn"
          v-if="flag_refreshed == 0"
          v-on:click="_RefreshTask"
        ></a>
        <p class="limit-time">
          任务领取时间:<span>{{ st_time }}~{{ task_ed_time }}</span>
        </p>
      </div>
      <ul>
        <li v-for="(item, index) in lst_Random" v-bind:key="index">
          <div class="parent-task-box">
            <div class="task_box_item_left">
              <div class="jy-icon-lg"></div>
              <p>{{ `x${item.gift_num}` }}</p>
            </div>
            <div class="task_box_item_center">
              <p class="task_num">
                {{ `任务${index + 1} ( ${item.v}/${item.cv} )` }}
              </p>
              <p class="task_name">{{ item.task_name }}</p>
            </div>
            <a
              href="javascript:;"
              v-if="item.taskFlag == 0"
              class="task_lq"
              v-on:click="_RcvTask('p', item.task_id)"
              >领取</a
            >
            <a
              href="javascript:;"
              v-if="item.taskFlag == -1"
              class="task_lq"
              v-on:click="_RcvTask('p', item.task_id)"
              >不可领取</a
            >
            <a
              href="javascript:;"
              v-if="item.taskFlag == 1"
              class="task_lq"
              v-on:click="_RcvTask('p', item.task_id)"
              >已领取</a
            >
          </div>
        </li>
      </ul>
    </div>

    <div class="task_box_blue_main" v-show="tabFlag == 2">
      <div class="task_box_blue_main_hd">
        <div class="rush-bg">
          <span
            >任务进度<i>{{ advanced_v }}/{{ advanced_c }}</i></span
          >
          <div class="rush-progress">
              <em v-bind:style="{'width':''+(advanced_v/advanced_c)*130+'px'}"></em>
          </div>
        </div>
        <p class="limit-time">
          奖励领取时间:<span>{{ st_time }}~{{ ed_time }}</span>
        </p>
      </div>
      <ul>
        <li>
          <div class="parent-task-box">
            <div class="task_box_item_left">
              <div class="jy-icon-lg"></div>
              <p>×500</p>
            </div>
            <div class="task_box_item_center">
              <p class="task_num">
                {{ `进阶任务1 ( ${self_advanced_1.v}/${self_advanced_1.cv} )` }}
              </p>
              <p class="task_name">{{ self_advanced_1.task_name }}</p>
            </div>
            <a
              href="javascript:;"
              v-if="self_advanced_1.taskFlag == -1"
              v-on:click="_RcvSelfTask(1)"
              class="task_lq"
              >未完成</a
            >
            <a
              href="javascript:;"
              v-if="self_advanced_1.taskFlag == 0"
              v-on:click="_RcvSelfTask(1)"
              class="task_lq"
              >领取</a
            >
            <a
              href="javascript:;"
              v-if="self_advanced_1.taskFlag == 1"
              v-on:click="_RcvSelfTask(1)"
              class="task_lq"
              >已领取</a
            >
          </div>
          <div class="child-task-box">
            <div
              class="child-task-box-item"
              v-for="(item, index) in lst_advanced_1"
              v-bind:key="index"
            >
              <span>{{ `${item.task_name} ${item.v}/${item.cv}` }}</span>
              <span><i class="jinyan-sm"></i>{{ `x${item.gift_num}` }}</span>
              <a
                href="javascript:;"
                v-show="item.taskFlag == 1"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >未完成</a
              >
              <a
                href="javascript:;"
                v-show="item.taskFlag == 0"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >领取</a
              >
              <a
                href="javascript:;"
                v-show="item.taskFlag == -1"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >已领取</a
              >
            </div>
          </div>
        </li>

        <li>
          <div class="parent-task-box">
            <div class="task_box_item_left">
              <div class="jy-icon-lg"></div>
              <p>×500</p>
            </div>
            <div class="task_box_item_center">
              <p class="task_num">
                {{ `进阶任务2 ( ${self_advanced_2.v}/${self_advanced_2.cv} )` }}
              </p>
              <p class="task_name">{{ self_advanced_2.task_name }}</p>
            </div>
            <a
              href="javascript:;"
              v-if="self_advanced_2.taskFlag == -1"
              v-on:click="_RcvSelfTask(2)"
              class="task_lq"
              >未完成</a
            >
            <a
              href="javascript:;"
              v-if="self_advanced_2.taskFlag == 0"
              v-on:click="_RcvSelfTask(2)"
              class="task_lq"
              >领取</a
            >
            <a
              href="javascript:;"
              v-if="self_advanced_2.taskFlag == 1"
              v-on:click="_RcvSelfTask(2)"
              class="task_lq"
              >已领取</a
            >
          </div>
          <div class="child-task-box">
            <div
              class="child-task-box-item"
              v-for="(item, index) in lst_advanced_2"
              v-bind:key="index"
            >
              <span>{{ `${item.task_name} ${item.v}/${item.cv}` }}</span>
              <span><i class="jinyan-sm"></i>{{ `x${item.gift_num}` }}</span>
              <a
                href="javascript:;"
                v-show="item.taskFlag == 1"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >已领取</a
              >
              <a
                href="javascript:;"
                v-show="item.taskFlag == 0"
                class="task_item_wc"
                v-on:click="_RcvTask('a', item.task_id)"
                >领取</a
              >
              <a
                href="javascript:;"
                v-show="item.taskFlag == -1"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >未完成</a
              >
            </div>
          </div>
        </li>

        <li>
          <div class="parent-task-box">
            <div class="task_box_item_left">
              <div class="jy-icon-lg"></div>
              <p>×500</p>
            </div>
            <div class="task_box_item_center">
              <p class="task_num">
                {{ `进阶任务3 ( ${self_advanced_3.v}/${self_advanced_3.cv} )` }}
              </p>
              <p class="task_name">{{ self_advanced_3.task_name }}</p>
            </div>
            <a
              href="javascript:;"
              v-if="self_advanced_3.taskFlag == -1"
              v-on:click="_RcvSelfTask(3)"
              class="task_lq"
              >未完成</a
            >
            <a
              href="javascript:;"
              v-if="self_advanced_3.taskFlag == 0"
              v-on:click="_RcvSelfTask(3)"
              class="task_lq"
              >领取</a
            >
            <a
              href="javascript:;"
              v-if="self_advanced_3.taskFlag == 1"
              v-on:click="_RcvSelfTask(3)"
              class="task_lq"
              >已领取</a
            >
          </div>
          <div class="child-task-box">
            <div
              class="child-task-box-item"
              v-for="(item, index) in lst_advanced_3"
              v-bind:key="index"
            >
              <span>{{ `${item.task_name} ${item.v}/${item.cv}` }}</span>
              <span><i class="jinyan-sm"></i>{{ `x${item.gift_num}` }}</span>
              <a
                href="javascript:;"
                v-show="item.taskFlag == 1"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >已完成</a
              >
              <a
                href="javascript:;"
                v-show="item.taskFlag == 0"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >完成</a
              >
              <a
                href="javascript:;"
                v-show="item.taskFlag == -1"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >未完成</a
              >
            </div>
          </div>
        </li>

        <li>
          <div class="parent-task-box">
            <div class="task_box_item_left">
              <div class="jy-icon-lg"></div>
              <p>×500</p>
            </div>
            <div class="task_box_item_center">
              <p class="task_num">
                {{ `进阶任务4 ( ${self_advanced_4.v}/${self_advanced_4.cv} )` }}
              </p>
              <p class="task_name">{{ self_advanced_4.task_name }}</p>
            </div>
            <a
              href="javascript:;"
              v-if="self_advanced_4.taskFlag == -1"
              v-on:click="_RcvSelfTask(4)"
              class="task_lq"
              >未完成</a
            >
            <a
              href="javascript:;"
              v-if="self_advanced_4.taskFlag == 0"
              v-on:click="_RcvSelfTask(4)"
              class="task_lq"
              >领取</a
            >
            <a
              href="javascript:;"
              v-if="self_advanced_4.taskFlag == 1"
              v-on:click="_RcvSelfTask(4)"
              class="task_lq"
              >已领取</a
            >
          </div>
          <div class="child-task-box">
            <div
              class="child-task-box-item"
              v-for="(item, index) in lst_advanced_4"
              v-bind:key="index"
            >
              <span>{{ `${item.task_name} ${item.v}/${item.cv}` }}</span>
              <span><i class="jinyan-sm"></i>{{ `x${item.gift_num}` }}</span>
              <a
                href="javascript:;"
                v-show="item.taskFlag == 1"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >已完成</a
              >
              <a
                href="javascript:;"
                v-show="item.taskFlag == 0"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >完成</a
              >
              <a
                href="javascript:;"
                v-show="item.taskFlag == -1"
                v-on:click="_RcvTask('a', item.task_id)"
                class="task_item_wc"
                >未完成</a
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { RcvTask, RcvSelfTask, RefreshTask } from "../api/request";
import { Message } from "element-ui";
export default {
  data() {
    return {
      tabFlag: 1,
      lst_Random: [],
      self_advanced_1: "",
      self_advanced_2: "",
      self_advanced_3: "",
      self_advanced_4: "",
      lst_advanced_1: [],
      lst_advanced_2: [],
      lst_advanced_3: [],
      lst_advanced_4: [],
      self_c: 0,
      self_v: 0,
      advanced_c: 0,
      advanced_v: 0,
    };
  },
  mounted() {
    this._GetTaskData();
  },
  methods: {
    ...mapActions("templateDate", ["GetTaskDataFn", "getTemplateData"]),
    async _GetTaskData() {
      const result = await this.GetTaskDataFn({ id: this.$route.query.id });
      console.log(result);
      const { data: res } = result;
      this.lst_Random = res.lst_Random;
      this.self_advanced_1 = res.self_advanced_1;
      this.self_advanced_2 = res.self_advanced_2;
      this.self_advanced_3 = res.self_advanced_3;
      this.self_advanced_4 = res.self_advanced_4;
      this.lst_advanced_1 = res.lst_advanced_1;
      this.lst_advanced_2 = res.lst_advanced_2;
      this.lst_advanced_3 = res.lst_advanced_3;
      this.lst_advanced_4 = res.lst_advanced_4;
      this.self_c = res.self_c;
      this.self_v = res.self_v;
      this.advanced_c = res.advanced_c;
      this.advanced_v = res.advanced_v;
      // console.log(res);
    },
    //领取任务奖励
    async _RcvTask(Typeid, Tid) {
      const result = await RcvTask({
        id: this.$route.query.id,
        type: Typeid,
        tid: Tid,
      });
      console.log(result);
      if (result.errCode == 0) {
        this.GetTaskDataFn({ id: this.$route.query.id });
        this.getTemplateData({ id: this.$route.query.id });
      } else {
        Message.error(result.msg);
      }
    },
    //进阶任务领取
    async _RcvSelfTask(Typeid) {
      const result = await RcvSelfTask({
        id: this.$route.query.id,
        ty: Typeid,
      });
      console.log(result);
      if (result.errCode == 0) {
        this.GetTaskDataFn({ id: this.$route.query.id });
        this.getTemplateData({ id: this.$route.query.id });
      } else {
        Message.error(result.msg);
      }
    },
    //刷新任务
    async _RefreshTask() {
      const result = await RefreshTask({ id: this.$route.query.id });
      if (result.errCode == 0) {
        this.GetTaskDataFn({ id: this.$route.query.id });
        Message.success(result.msg);
      } else {
        Message.error(result.msg);
      }
    },
  },
  computed: {
    ...mapState("templateDate", [
      "st_time",
      "ed_time",
      "task_ed_time",
      "flag_refreshed",
    ]),
  },
};
</script>